 <script lang="ts" setup>
import {ref,onMounted}from "vue"
import {ElInput,ElForm,ElFormItem,ElButton} from "element-plus"
import type { FormInstance } from 'element-plus'

defineOptions({ name: 'Register' });
const formRef = ref<FormInstance>()

const ruleForm=ref({
  phone:"",
  code:'',
  password:"",
  confirmPassword:"",
  name:"",
  card:"",
  email:''
})
const rules={
  phone: [
    { required: true,message:'输入手机号',  trigger: 'blur' },
  ],
  code: [
    { required: true, message:'输入验证码', trigger: 'blur' },
  ],
  password: [
    { required: true, message:'输入密码', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, message:'输入确认密码', trigger: 'blur' },
  ],
  name: [
    { required: true, message:'姓名', trigger: 'blur' },
  ],
  card: [
    { required: true, message:'身份证', trigger: 'blur',pattern:'' },
  ],
  email: [
    { required: true, message:'邮箱', trigger: 'blur'},
  ]
}

// 注册成功后需要判断用户身份，是跳转到客户端还是服务端
const register=()=>{
  if (!formRef) return
  formRef.value?.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } 
  })
}

const getCode=()=>{}

onMounted(()=>{
  formRef.value?.resetFields()
})

</script>
<template>
  <div class="login flex flex-col items-center  p-[30px]">
      <div class="pb-[20px] font-semibold text-[26px]">登&nbsp;&nbsp;录</div>
      <el-form
        ref="formRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone" />
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="ruleForm.code">
            <template #append>
              <el-button type="primary" text @click="getCode">获取验证码</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" show-password/>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="ruleForm.confirmPassword" type="password" show-password/>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="身份证" prop="card">
          <el-input v-model="ruleForm.card" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" />
        </el-form-item>
      </el-form>
      <div  class="register pt-[15px] pb-[8px] w-[100%]">
        <el-button color="#ef6295" class="w-[100%]" @click="register">
          <span class="text-[#fff]">注&nbsp;册</span>
        </el-button>
      </div>
      <div class="w-[100%] text-[9px] text-[#878789]">
        <p>我们收集您的姓名、身份证号等信息，用于：</p>
        <p>验证学员身份，保障考试公平性；生成官方认证证书；提供考试通知及后续服务。</p>
        <p>所有信息严格保密，仅用于考试相关用途。</p>
      </div>
  </div>
</template>
 
 